import React from 'react'
import { Swiper } from 'react-vant';
import { items } from '../components/swiperitem';
import '../style/swiper.scss';
import {useState} from "react"
import Appdau from './appdau';
import Appson from './appson';
// import {Provider} from "../utils/context"
import {Provider} from "../utils/context"
// 讲爷爷组件传递参数给父亲组件，父亲组件在传递参数给孙子组件
function App() {

  let obj = {name:"zhansgan"}
  let [val,setVal] = useState("")
  let [val1,setVal1] = useState("")
  let changval = (e)=>{
        console.log(e.target.value);
        setVal(e.target.value)
  }
  let fn = ()=>{
      
    console.log(val);
  }
  let CHANGVAL1 = (e)=>{
  
  }
  let sendfn = (data)=>{
     console.log(data);
  }
  return (
    <div className="demo-swiper">
        <Swiper autoplay={5000}>{items}</Swiper>
        <hr />
        {/* 在react中获取输入框的值使用受控组件或者非受控组件 */}
        {/* 在大部分情况下我们用受控组件获取输入框的值 */}
        <input type="text" value={val} onChange={changval}/>
        <input type="text" defaultValue={val1} onChange={CHANGVAL1}/>
        <button onClick={fn}>提交</button>
        <hr />
        {/* react是单向数据流，子组件要想给父组件传递参数，需要父组件给子组件传递一个方法，子组件调用父组件的方法，讲参数传递给父组价方法的形参中 */}
        {/* 爷爷要想给孙子传参，就用privier包裹住爸爸 */}
          <Provider value={obj}>
              <Appson sendfn={sendfn}></Appson>
          </Provider>
         
     
    
          <Appdau></Appdau>
       

  </div>
  )
}

export default App